<template>
    <div class="container-filled">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
            label-position="top">
            <el-form-item label="文章标题" prop="articleTitle">
                <el-input v-model="ruleForm.articleTitle" autocomplete="off" />
            </el-form-item>
            <el-form-item label="文章内容" prop="articleContext" style="padding-bottom: 2rem;">
                <wang-editor :style="{ height: '400px' ,width: '100%' }" @GetArticleContext="GetArticleContext"
                    v-model='ruleForm.articleContext' :disabled='wangDisabled'></wang-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script lang="ts">// @ts-nocheck
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import wangEditor from '../../components/wang-editor.vue'
import api from '../../api/api'
export default {
    components: { wangEditor },
    data() {
        return {
            wangDisabled: false
        }
    },
    setup() {
        // 设置规则
        const ruleFormRef = ref<FormInstance>()
        // 检查是否为空
        const notEmpty = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('该字段不能为空!'))
            } else {
                callback()
            }
        }
        // 设置响应的数据
        const ruleForm = reactive({
            articleTitle: '',
            articleContext: ''
        })
        // 在解除焦点之后触发验证器
        const rules = reactive({
            articleTitle: [{ validator: notEmpty, trigger: 'blur' }],
            articleContext: [{ validator: notEmpty, trigger: 'blur' }],
        })
        // 提交按钮
        const submitForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    api.post("/admin/article", {
                        articleTitle: ruleForm.articleTitle,
                        articleContext: ruleForm.articleContext,
                    }).then((res) => {
                        if (res.status === 201) {
                            ElMessage.success("添加成功!")
                            // 找一个更好的重置方法 目前重置方法只能重置标题
                            // 富文本框因为是子组件内容 所以可能还需要另外的方法
                            // resetForm(ruleFormRef)
                        } else {
                            ElMessage.error("添加失败!")
                        }
                    })
                } else {
                    console.log(ruleForm)
                    ElMessage.error("验证失败!")
                    return false
                }
            })
        }
        // 重置按钮
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.resetFields()
        }

        // 父子组件传值 获取到富文本框组件的内容
        const GetArticleContext = (value) => {
            ruleForm.articleContext = value
        }
        // 将方法与表单对象导出
        return {
            ruleForm: ruleForm,
            ruleFormRef: ruleFormRef,
            rules: rules,
            submitForm: submitForm,
            resetForm: resetForm,
            GetArticleContext
        }
    }
}
</script>